<template>
  <div class="box">
    <van-form>
      <h3 @click="goBack">×</h3>
      <h2>密码登录</h2>
      <van-field
        v-model="phone"
        placeholder="手机/用户名"
        name="phone"
        style="backgroundcolor: #fff"
      />
      <br />
      <van-field
        v-model="pass"
        placeholder="密码"
        name="pass"
        style="backgroundcolor: #fff"
      />
      <br />
      <van-field
        v-model="repass"
        placeholder="确认密码"
        name="确认密码"
        clearable
      >
      </van-field>
      <br />
      <div
        style="
          margin: 16px;
          text-align: center;
          height: 40px;
          line-height: 40px;
          background-color: lightgray;
          border-radius: 15px;" >
        <van-button @click="goLogin">注册</van-button>
      </div>
    </van-form>
    <div class="end">
      <van-checkbox v-model="checked">
        已阅读并同意<span>《用户服务协议》</span>、<span>《隐私政策》</span>
      </van-checkbox>
    </div>
  </div>
</template>

<script>
import { user_register } from "../api/index2";

export default {
  name: "Login",
  data() {
    return {
      phone: "",
      pass: "",
      repass: "",
      checked: false,
    };
  },
  methods: {
    goBack(){
      this.$router.back()
    },
    goLogin() {
      let xiaoyan = /^1[3|4|5|7|8|9][0-9]\d{4,11}$/;
      if (!this.phone  || !this.pass || !this.repass) {
        alert("不能为空");
        return;
      } else if (xiaoyan.test(this.phone) == false) {
        alert("请输入正确的格式");
        return;
      } else if(!(this.pass == this.repass)){
        alert("密码不一致");
        return;
      }
      else {
        user_register({phone:this.phone,pass:this.pass}).then((res) => {
          if (res.data.code == "200") {
            localStorage.setItem("username", this.phone);
            // localStorage.setItem("userpass", this.pass);
            this.$router.push("/Login");
          }
         
        });
      }
    },
  },
  mounted() {},
};
</script>

<style lang="css" scoped>
.box {
  margin: 0 auto;
}
h3,
.end {
  margin: 15px auto 20px;
  padding: 0 15px;
}
h2 {
  margin: 25px auto 30px;
  padding: 0 15px;
}
.van-form {
  margin-bottom: 200px;
}
.van-button {
  background-color: lightgray;
  border: none;
  height: 30px;
}
</style>